<template>
  <div>
    <input type="text" @keyup="handleKeyup($event)"><br>
    <span v-if="count>0">您按了回车键<span>{{count}}</span>次</span>
    <br><br>
    <input type="text" @keyup.enter="handleKeyup1()"><br>
    <span v-if="number>0">您按了回车键<span>{{number}}</span>次</span>

  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      count: 0,
      number: 0
    })
    const handleKeyup = (e) => {
      // console.log(e.keyCode)
      if (e.keyCode === 13) {
        state.count++
      }
    }
    const handleKeyup1 = () => {
      state.number++
    }
    return {
      ...toRefs(state),
      handleKeyup,
      handleKeyup1
    }
  }
}
</script>

<style scoped>
span span{
  font-size: 20px;
  color:red;
  font-weight: 900;
  margin: 5px;
}
</style>